import React from "react";
import { Card, Row, Col, Modal } from "antd";
import "./ui.less";

export default class Gallery extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false
    };
  }

  openGallery = (imgsrc) => {
    this.setState({
      imgsrc: "../../../src/img/gallery/" + imgsrc,
      visible: true
    });
  };
  render() {
    //图片是个二维数组
    const imgs = [
      ["1.png", "2.png", "3.png", "4.png"],
      ["5.png", "6.png", "7.png", "8.png"],
      ["9.png", "10.png", "11.png", "12.png"],
      ["13.png", "14.png", "15.png", "16.png"],
      ["17.png", "18.png", "19.png", "20.png"],
      ["21.png", "22.png", "23.png", "24.png"]
    ];
    //map遍历 第一次找到哪一行,第二次找到行里的哪一个
    const imgList = imgs.map(list => {
      return list.map(item => {
        return (
          <Card
            style={{ marginBottom: 10 }}
            cover={<img src={"../../../src/img/gallery/" + item} />}
            onClick={() => this.openGallery(item)}
          >
            <Card.Meta title="封面标题" description="封面内容" />
          </Card>
        );
      });
    });
    return (
      <div>
        <Row gutter={8}>
          <Col md={6}>{imgList[0]}</Col>
          <Col md={6}>{imgList[1]}</Col>
          <Col md={6}>{imgList[2]}</Col>
          <Col md={6}>{imgList[3]}</Col>
          <Col md={6}>{imgList[4]}</Col>
          <Col md={6}>{imgList[5]}</Col>
        </Row>
        <Modal
          title="标题"
          //弹出是否可见
          visible={this.state.visible}
          // 关闭
          onCancel={() => {
            this.setState({
              visible: false
            });
          }}
          footer={null}
          width={350}
          height={500}
        >
        {<img src={this.state.imgsrc} style={{width:"100%"}}></img>}
        </Modal>
      </div>
    );
  }
}
